<template>
	<view class="invitation-viewport">
		<view class="qr-code-wrapper">
			<view class="qr-code-card">
				<view class="title">
					{{title}}
				</view>
				<view class="invitation-code" v-if="false">
					84928371283
				</view>
				<view class="qr-code">
					<image class="qr-code-img"  :src="QRCodeBase64"></image>
				</view>
				<view class="qr-code-txt">
					扫码加入
				</view>
			</view>
		</view>
		<view class="tui-exit">
			<tui-button shape="circle" class="btn btn-share" openType="share" shadow type="danger" height="88rpx">分享</tui-button>
			<tui-button shape="circle" class="btn btn-poster" shadow type="warning" height="88rpx" @tap='createPoster'>保存二维码</tui-button>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	
	export default {
		data() {
			return {
				type: '',
				QRCodeBase64: '',
				userInfo: this.$store.state.USER
			};
		},
		onLoad(opt) {
			this.type = opt.type
			uni.setNavigationBarTitle({
				title: opt.type === 'customer' ? '拓展客户' : '拓展下级'
			});
			uni.showShareMenu({
				// withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			this.getQrCode()
		},
		computed: {
			title() {
				const { username } = this.userInfo
				return this.type === 'customer' ? 
					`${username}邀请您游览${config.mallName}商城` :
					`${username}邀请您加入${config.mallName}商城`
			}
		},
		methods: {
			async getQrCode() {
				const { success, data } = await this.$api.getQrCode(this.type === 'customer' ? 2 : 1)
				if (success) {
					const base64Data = `data:image/png;base64,${data}`
					this.QRCodeBase64 = base64Data.replace(/[\r\n]/g, '');
				}
			},
			async createPoster() {
				const fsm = uni.getFileSystemManager();
				const time = new Date().getTime();
				fsm.writeFile({
					filePath: `${wx.env.USER_DATA_PATH}/${time}.png`,
					data: this.QRCodeBase64.replace('data:image/png;base64,', ''),
					encoding: 'base64',
					success: ret => {
						uni.showModal({
							title: '操作成功',
							content: '二维码保存成功',
							showCancel: false
						})
					},
					fail: err => {
						console.log(err, 'write error')
					}
				})
			}
		},
		onShareAppMessage(obj) {
			const { username } = this.userInfo
			return {
				title: this.title,
				path: `/pages/mall/mall?scene=${this.type === 'customer' ? 'c' : 'd'}_${this.$store.state.customerId}`,
				// 自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。
				// imageUrl: ''
			}
		}
	}
</script>

<style lang="scss">
page {
	background: #FFF;
	height: 100%;
}
.invitation-viewport {
	height: 100%;
	.qr-code-wrapper {
		padding: 30rpx 60rpx 160rpx;
		background: linear-gradient(0deg, #fff, #e41f19);
		.qr-code-card {
			border-radius: 20rpx;
			background: #FFF;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30rpx;
			color: #333;
			font-weight: 600;
			
			.title {
				line-height: 60rpx;
			}
			.invitation-code {
				color: #ec3e30
			}
			.qr-code {
				width: 400rpx;
				height: 400rpx;
				margin: 30rpx 0;
				.qr-code-img {
					width: 400rpx;
					height: 400rpx;
				}
			}
		}
	}
	.tui-exit {
		padding: 50rpx 24rpx;
		display: flex;
		.btn {
			flex: 1;
			&:first-child {
				margin-right: 10rpx;
			}
			&:last-child {
				margin-left: 10rpx;
			}
		}
	}
}
</style>
